<script setup>
import { ref } from "vue";
import avatar from "@/assets/default.png";
//文章列表数据模型
const Columns = ref();
const kw = ref();
import { homepageListService } from "@/api/homepage.js";

// 获取文章列表数据
const homepageList = async () => {
  let params = {
    kw: kw.value ? kw.value : null,
  };
  let result = await homepageListService(params);
  //渲染视图
  Columns.value = result.data;
};

homepageList();

import { ArrowRight, Search } from "@element-plus/icons-vue";

import { useRouter } from "vue-router";
const router = useRouter();

function ViewArticle(id) {
  // 使用Vue Router进行路由跳转，并传递商品ID
  router.push({ name: "ArticleDetails", params: { id } });
}


</script>
<template>
  <div class="box">
    <el-breadcrumb :separator-icon="ArrowRight" style="margin: 10px">
      <el-breadcrumb-item :to="{ path: '/homepage/homepage' }">
        homepage
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="page-container">
      <template #header>
        <div class="header">
          <span>首页</span>
        </div>
        <el-divider />
        <span>
          文章标题:<el-input v-model="kw" clearable style="width: 20%; margin: 10px" />
          <el-button type="primary" size="large" :icon="Search" @click="homepageList()">搜索</el-button>
        </span>
      </template>
      <!-- 内容展示區 -->
      <div class="box-homepage" v-for="c in Columns" style="width: 100%" :key="c.id" @click="ViewArticle(c.id)">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>
                <span>
                  <el-text line-clamp="1">
                    <h2>{{ c.title }}</h2>
                  </el-text>
                </span>
                <p>类型: <span class="categoryName">{{ c.categoryName }}</span></p>
              </span>
              <span class="userimage-box">
                发布人：
                <img v-if="c.userPic" :src="c.userPic" />
                <img v-else :src="avatar" />
                {{ c.nickName }}
              </span>
            </div>  
          </template>
          <img :src="c.coverImg" style="z-index: -999; width: 350px;height: 200px;" />
          <span>点赞：{{ c.likes }}</span>
          <div class="updateTime">
            <span>发布时间： {{ c.updateTime }} </span>
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.box {
  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
}

.content {
  float: left;
}

.categoryName {
  width: 100%;
}

.updateTime {
  color: rgb(214, 157, 0);
  float: right;
  margin-bottom: 1%;
}

.userimage-box {
  float: buttom;
}

.userimage-box img {
  width: 40px;
  height: 40px;
  border: 2px gray;
  border-radius: 50%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 28%;
  float: left;
  margin: 2%;
  cursor: pointer;
}

.box-homepage {
  margin-bottom: 2%;
}
</style>
